<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>start</title>
	<script src="./jquery-3.3.1.js"></script>
	<style>
		.score-star-wrap {
  			display: inline-block;
			font-size: 0;
		}
		.score-star-wrap .star-wrap {
			position: relative;
			display: inline-block;
			width: 80px; /* 16 * 5*/
	  	}
	  	.score-star-wrap img {
			width: 16px;
			height: 16px;
	  	}
	  	.score-star-wrap .star-active-wrap {
			position: absolute;
			top: 0;
			left: 0;
			overflow: hidden;
	  	}
	  	.score-star-wrap .star-active,
	  	.score-star-wrap .star-default {
			display: inline-block;
			width: 80px; /* 16 * 5*/
	  	}
	  	.score-star-wrap .star-num {
			margin-left: .5em;
	  		font-size: 16px;
	  		line-height: 16px;
	  		vertical-align: text-bottom;
	  	}
	</style>
</head>
<body>
	<div class="score-star-wrap">
		<div class="star-wrap">
			<div class="star-active-wrap">
				<div class="star-active">
					<img src="./icon_star_active.png" alt="">
					<img src="./icon_star_active.png" alt="">
					<img src="./icon_star_active.png" alt="">
					<img src="./icon_star_active.png" alt="">
					<img src="./icon_star_active.png" alt="">
				</div>
			</div>
			<div class="star-default">
				<img src="./icon_star_default.png" alt="">
				<img src="./icon_star_default.png" alt="">
				<img src="./icon_star_default.png" alt="">
				<img src="./icon_star_default.png" alt="">
				<img src="./icon_star_default.png" alt="">
			</div>
		</div>
		<span class="star-num"></span>
	</div>

	<script>
		var starScore = 4.8;

		setStar(starScore);

		function setStar(score) {
			var $scoreStarWrap = $('.score-star-wrap');
			var $starActive = $scoreStarWrap.find('.star-active-wrap');
			var $starDefault = $scoreStarWrap.find('.star-default');
			var $starNum = $scoreStarWrap.find('.star-num');
			var percent = (Math.round(score / 10 * 10000) / 100.00 + "%");
			var scoreStr = score.toFixed(1) + '分';

			$starActive.css({'width': percent});
			$starNum.html(scoreStr)
		}
	</script>
</body>
</html>